@charset "UTF-8";
* {
	border: 0;
	margin: 0;
}
body {
  background: radial-gradient(#1b2735 0%, #090a0f 100%);
  overflow: hidden;
  font-family: 'Anton', sans-serif;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.bigNav {
	width: 400px;
	height: 400px;
	margin: 100px auto;
}
.zh,
.paw {
	width: 223px;
	height: 37px;
	border-radius: 20px;
	padding-left: 5px;
	outline-style: none;
	box-sizing: border-box;
	border: 2px solid #dfe6e9;
	text-align: center;
	transition: 0.5s;
	margin-bottom: 10px;
}
.zh:focus,
.paw:focus {
	width: 255px;
	border: 2px solid #3498db;
	color: #c7ecee;
}
.sub,
.regir {
	position: absolute;
	display: inline-block;
	width: 15px;
	height: 15px;
	border-radius: 50%;	
	background-color: #4cd137;
	border: 2px solid #3498db;
	cursor: pointer;
	transition: 1s;
	right: 48%;
}
.regir {
	right: 24%;
	background-color: #ffa502;
}
.sub:hover {
	background-color: #7bed9f;
}
.regir:hover {
	background-color: #eccc68;
}
.box {
	position: absolute;
	width: 330px;
	padding: 40px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}
.checkFlag {
	position: absolute;
	width: 15px;
	height: 15px;
	left: 25%;
	cursor: pointer;
}